<template>
	<view class="header bg-box">
		<view class="main-content">
			<view class="coin-logo">
				<image :src="logo(symbol)" mode="widthFix"></image>
			</view>
			<view class="amount">
				{{amount}} {{symbol.toUpperCase()}}
			</view>
		</view>
		
		<view class="operator">
			<view class="item" @click="recharge(symbol)">
				<view class="icon">
					<view class="iconfont icon-xiazai1"></view>
				</view>
				<view class="icon-text">充币</view>
			</view>
			<view class="item" @click="withdraw(symbol)">
				<view class="icon">
					<view class="iconfont icon-shangchuan"></view>
				</view>
				<view class="icon-text">提币</view>
			</view>
			<view class="item" @click="transferlogs(symbol)">
				<view class="icon">
					<view class="iconfont icon-wodeshouzhi"></view>
				</view>
				<view class="icon-text">转账记录</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				symbol: "",
				amount: 0,
			}
		},
		onLoad(e) {
			this.symbol = e.symbol;
			this.amount = e.amount;
			uni.setNavigationBarTitle({
				title: this.symbol.toUpperCase()
			})
		},
		methods: {
			logo(symbol) {
				if (this.symbol.toUpperCase() == 'USDT') {
					return "../../../static/icon/usdt-logo-300.png"
				} else {
					return "../../../static/icon/sidlogo.png"
				}
			},
			recharge(symbol) {
				uni.navigateTo({
					url: "recharge?symbol=" + symbol + "&balance=" + this.amount
				})
			},
			withdraw(symbol) {
				uni.navigateTo({
					url: "withdraw?symbol=" + symbol + "&balance=" + this.amount
				})
			},
			transferlogs(symbol) {
				uni.navigateTo({
					url: "../../ucenter/currency/index?symbol=" + symbol
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url(../../../static/background/layout_bg.png);
		height: 100%;
	}

	view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.header {
		margin: 15px;
		border-radius: 12px;
		box-shadow: 0 0 15px rgba(0, 0, 0, .3);
		overflow: hidden;
		.main-content{
			padding:15px;
		}

		.coin-logo {

			image {
				margin: 10px auto;
				width: 50px;
			}
		}

		.amount {
			font-weight: bold;
			color: #31E8D6;
			text-align: center;
			font-size: 20px;
		}

		.operator {
			flex-direction: row;
			justify-content: space-between;
			margin-top: 15px;
			background-color: rgba(0,0,0,.5);
			
			padding:15px 25px;
			border-top: 1px solid rgba(0, 0, 0, .2);

			.item {
				view {
					text-align: center;
					justify-content: center;
				}

				.icon {
					.iconfont {
						color: #31E8D6;
						font-size: 32px;
						line-height: 100%;
					}
				}

				.icon-text {
					font-size: 14px;
					padding-top: 5px;
				}
			}
		}
	}
</style>
